<template>

     <!-- 需要设置visible属性，它接收Boolean，当为true时显示 Dialog -->
     <!-- :visible.sync="dialogVisible"通过哪个变量控制弹窗的可见性 -->
    <el-dialog
      title="添加轮播图"
      :visible.sync="dialogVisible"
      width="50%">
        <!-- :model 将数据form赋值给表单内组件 -->
        <el-form ref="ruleForm" :model="form" label-width="80px" style="margin-top: 30px;" :rules="rules">

          <el-form-item label="投放语言" prop="lacate">
             <el-select v-model="form.lacate" placeholder="请选择">
               <el-option label="中文" value="zh"></el-option>
               <el-option label="英语" value="en"></el-option>
               <el-option label="法语" value="fr"></el-option>
               <el-option label="日语" value="ja"></el-option>
             </el-select>
           </el-form-item>


           <el-form-item label="文件类型" prop="fileType">
              <el-select v-model="form.fileType" placeholder="请选择文件类型">
                <el-option label="图片" value="1"></el-option>
                <el-option label="视频" value="2"></el-option>
              </el-select>
            </el-form-item>

      <!-- action上传地址  本地服务器地址-->
      <!-- https://jsonplaceholder.typicode.com/posts/ -->
      <!-- 可通过设置limit和on-exceed来限制上传文件的个数和定义超出限制时的行为 -->
      <!-- http://192.168.52.1:8080/fileManager/upLoadFile 获取服务器地址 -->


<el-form-item label="投放页面">
           <el-select v-model="form.category" placeholder="清选择">
             <el-option label="首页轮播图" value="首页轮播图"></el-option>
             <el-option label="产品SE01" value="SE01"></el-option>
             <el-option label="产品PM01" value="产品PM01"></el-option>
             <el-option label="产品SA01" value="产品SA01"></el-option>
             <el-option label="产品S2" value="产品S2"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="投放位置">
           <el-select v-model="form.sectionName" placeholder="清选择">
             <el-option label="新闻与更新" value="新闻与更新"></el-option>
           </el-select>
            <!-- <el-select v-model="form.sectionName" placeholder="清选择">
              <el-option
              v-for="(item,index) in sectionNameOption"
              :key="index"
              label="首页轮播图" value="首页轮播图"></el-option>
              <el-option
                :label="sectionNameOption.label"
                :value="sectionNameOption.value">
              </el-option>
            </el-select> -->
          </el-form-item>

        <el-form-item label="图片地址" v-if="form.fileType==='1'">
          <div class="row">
            <el-input v-model="form.imageUrl"></el-input>
            <el-upload
              class="upload-demo"
              :action="uploadHost"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="1"
              :on-exceed="handleExceed"
              :on-success="handleSuccess"
              :file-list="fileList">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item label="视频地址" v-if="form.fileType==='2'">
          <div class="row">
            <el-input v-model="form.videoUrl"></el-input>
            <el-upload
              class="upload-demo"
              :action="uploadHost"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="handleRemoveVideo"
              multiple
              :limit="1"
              :on-exceed="handleExceed"
              :on-success="handleSuccessVideo"
              :file-list="fileList">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </div>
        </el-form-item>




      <!-- 表单验证  是否必须 -->
        <el-form-item label="标题" prop="title" style="margin-top: 30px;">
          <el-input v-model="form.title"></el-input>
        </el-form-item>


        <el-form-item label="描述" prop="description">
          <el-input type="textarea" v-model="form.description"></el-input>
        </el-form-item>




      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </span>

    </el-dialog>


</template>

<script>
      // vue 怎么调用其他js文件的方法
      import { addBanner } from '../../../../api/system/home_banner'; // 引入特定的方法
      import { imageHost } from '@/api/ImageHost';
      import { uploadHost } from '@/api/UploadHost'

      export default{

        data(){
          return{
            uploadHost:'',
            imageHost:'',
            dialogVisible:false,
            fileList : [],
            imageUrl:undefined,
            // 表单数据
            form: {
                  title: '',
                  titleEn: '',
                  description: '',
                  descriptionEn: '',
                  imageUrl:'',
                  category:'',
                  sectionName:'',
                  fileType:'',
                  lacate:'zh'
            },
            rules:{
               fileType: [{ required: true, message: '请选择文件类型', trigger: 'change' }],
               title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
               titleEn: [{ required: true, message: '请输入标题英文', trigger: 'blur' }],
               description: [{ required: true, message: '请输入描述', trigger: 'blur' }],
               descriptionEn: [{ required: true, message: '请输入描述英文', trigger: 'blur' }],
               category: [{ required: true, message: '请输入分类名称', trigger: 'blur' }],
               sectionName: [{ required: true, message: '请输入模块名称', trigger: 'blur' }]

            }


          }
        },
        created(){
           this.imageHost=imageHost();
           this.uploadHost = uploadHost();

        },
        methods:{
          showDialog(){
            this.dialogVisible=true;
          },

          handleRemove(file, fileList) {
            console.log(file, fileList);
            this.form.imageUrl='';
          },
          handlePreview(file) {
            console.log(file);

          },
          handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
          },
          beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${ file.name }？`);
          },
           // 当文件上传成功时触发
          handleSuccess(response, file, fileList) {
                // 在这里可以对响应数据进行处理
                // 比如将服务器返回的数据保存到 Vuex 或者本地状态中
                // 将图片地址放入表单
                this.form.imageUrl='https://ai.itnewers.com/files/config/mp4/1737342574994.mp4'+response.data;

          },
          handleRemoveVideo(file,fileList){
              console.log(file, fileList);
              this.form.videoUrl='';
          },
          handleSuccessVideo(response, file, fileList){
                // 将图片地址放入表单
                this.form.videoUrl='https://ai.itnewers.com/files/config/mp4/1737342574994.mp4'+response.data;
          },
          submitForm(formName){
             this.$refs[formName].validate((valid) => {
                      if (valid) {
                        // alert('submit!');
                        this.addForm();
                      } else {
                        // alert('error submit!!');
                        return false;
                      }
              });
          },
          addForm(){
              addBanner(this.form).then(response => {
                console.log(response);
                this.dialogVisible=false;
                // 给父组件发送事件
                this.$emit('custom-event');

              });

          }

        }


      }
</script>

<style scoped>
  .line_image{
      display: flex;
      flex-direction: row;

  }
  .line_image_margin{
      display: flex;
      flex-direction: row;
      margin-top: 30px;
  }
  .line_image_lable{
      width: 70px;
      height: 40px;
      display: flex;
      flex-direction: row;
      justify-content: end;
      align-items: center;
  }
  .upload-demo{
      margin-left: 15px;

  }
  .image_label{
      color: #666666;
  }

  .row{
    display: flex;
  }
</style>
